<template>
    <div style="height: 100%;width: 100%;background: rgba(240, 240, 240, 1)">
        <div v-if="viewType == 'drag'">
            <!--拖拽布局-->
            <grid-layout-view :localParams="localParams" :layout="layoutList"  :isFullShow="isFullShow"></grid-layout-view>
        </div>
        <div v-else style="height:100%;">
            <!--经典布局-->
            <custom-layout-view :localParams="localParams" :layout="layoutModel"></custom-layout-view>
        </div>
    </div>
</template>

<script>
import FormCustomApi from "@/common/api/form/formCustom.js";
import GridLayoutView from "./GridLayoutView/GridLayoutView.vue";
import CustomLayoutView from "./CustomLayoutView/CustomLayoutView.vue";

export default {
    name: "FormCustomView",
    components: {
        GridLayoutView,
        CustomLayoutView
    },
    props: {
        layout: {
            //拖拽模式直接传入组件配置
            type: Array,
            default: () => []
        },
        alias: {
            type: String
        },
        params: {
            type: String
        },
        //这个是从DialogView打开时需要用到的。
        menuParams: {
            type: String
        },
        destroy: {
            type: Function
        },
    },
    data() {
        return {
            //自定义页面标识
            viewAlias: "",
            //自定义页面类型
            viewType: "drag",
            //加密参数
            encryParams: {},
            //展示分享
            showShare: true,
            //从路由打开
            routeOpen: false,
            //全屏
            isFullShow: false,
            //拖拽布局
            layoutList: this.layout,
            //经典布局
            layoutModel: {},
            localParams:{}
        }
    },
    created() {
        this.initCustom();
    },
    methods: {
        //初始化参数
        initParams() {
            if (!this.alias) {
                if (this.menuParams) {
                    let json = JSON.parse(this.menuParams);
                    this.viewAlias = json.alias;
                }
                else {
                    //通过路由打开
                    if (this.$route.meta.params) {
                        let json = JSON.parse(this.$route.meta.params);
                        this.viewAlias = json.alias;
                        //获取传入参数
                        this.localParams = this.$route.meta.params;
                    } else {
                        //分享的页面定制
                        if (this.$route.params.encryParams) {
                            let decryStr = window.atob(this.$route.params.encryParams); // 解码
                            let paramStr = window.decodeURIComponent(decryStr);
                            if (paramStr) {
                                this.encryParams = JSON.parse(paramStr);
                                this.viewAlias = this.encryParams.alias;
                                //分享的路径不允许再分享
                                this.showShare = false;
                            }
                        } else {
                            this.viewAlias = this.$route.params.alias;
                        }
                    }
                }
                //从路由打开
                this.routeOpen = true;
            } else {
                this.viewAlias = this.alias;
            }
            /**
             Util.open()打开里面的参数
             */
            if (this.params) {
                this.localParams = JSON.parse(this.params)
            }
        },
        //根据别名获取加载的自定义页面
        initCustom() {
            this.initParams();
            let self = this;
            if (!this.viewAlias) {
                this.isFullShow = true;
                return;
            }
            FormCustomApi.getByAlias(this.viewAlias).then(res => {
                self.viewType = res.type;
                if (!self.routeOpen) {
                    localStorage.setItem("CUR_APP_ID", res.appId);
                }
                if (res.type == 'drag') {
                    self.layoutList = JSON.parse(res.json);
                } else {
                    self.layoutModel = JSON.parse(res.json);
                }
            })
        },
    },
    watch: {
        '$route': {
            handler: function (val) {
                this.initCustom();
            },
            deep: true
        }
    },
}
</script>

<style scoped></style>
